import Image from 'next/image';
import icon from '@app/asset/image/icon.png';
import yun from '@app/asset/image/yun.png';
import { TranslationsProvider, type locale } from '@gm/locale';
import { initTranslations } from '@gm/locale/server';
import { LanguageChanger } from '@/components/locale/LanguageChanger';

const i18nNamespaces = ['login', 'app'];

export default async function SignInLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: locale }>;
}) {
  const { locale } = await params;
  const { t, resources } = await initTranslations(locale, i18nNamespaces);

  return (
    <TranslationsProvider
      namespaces={i18nNamespaces}
      locale={locale}
      resources={resources}
    >
      <section
        className={`bg-[url('/image/bg_light_shadow.png'),url('/image/bg_microsoft_style.png')] bg-blend-overlay bg-cover top-0 right-0 left-0 h-screen w-screen`}
      >
        <div className="h-1/10 w-full flex items-center justify-between">
          <div className="flex items-center justify-center">
            <Image
              src={icon}
              width={24}
              height={24}
              alt="Logo"
              className="h-12 w-auto inline-block"
            />
            <div className="text-2xl font-bold text-primary inline-block">
              {t('name', { ns: 'app' })}
            </div>
          </div>
          <div className="inline-block mr-6">
            <LanguageChanger />
          </div>
        </div>
        <div className="w-full h-8/10 flex items-center-safe">
          <div className="inline-block w-6/10">{children}</div>
          <div className="inline-block ml-auto">
            <Image
              src={yun}
              width={512}
              height={512}
              alt="yun"
              priority={true}
              className="w-auto"
            />
          </div>
        </div>
      </section>
    </TranslationsProvider>
  );
}
